<template>
  <div class="content-container" style="position: relative;">
      <div class="panel">

        <div class="menu" style="background-color: rgba(35,192,161,1);" @click="navToLg">
          <img class="icon"  src="@/assets/icon-linggong.png"/>
          <div class="title">找零工</div>
        </div>
        <div class="menu" style="margin-left: 100px;background-color: rgba(244,131,121,1)" @click="navToQz">
          <img class="icon"  src="@/assets/icon-qz.png"/>
          <div class="title">找全职</div>
        </div>
        <div class="menu" style="margin-left: 100px;"  @click="showQr = true">
          <img class="icon"  src="@/assets/icon-scan.png"/>
          <div class="title">扫码登记</div>
        </div>
        <img class="system-logo-icon" src="@/assets/logo.png"></img>

      </div>
    <el-dialog  title="小程序二维码【微信扫一扫】" :visible.sync="showQr" width="300px"  append-to-body>
      <img style="width: 200px;margin-left: 30px" alt="qrcode" src="@/assets/wechat_qrcode.jpg" />
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="showQr=false">关 闭</el-button>
      </div>
    </el-dialog>

    <el-dialog  title="找零工" :visible.sync="lgDialogVisible"  width="500px"  append-to-body>
      <el-form ref="lgform"   :rules="lgRules" :model="lgform" label-width="80px">
        <el-form-item label="意向岗位" prop="gz0000">
          <el-cascader  ref="lgCas" :options="gzOptions" :props="lgProps"  v-model="lgform.gz0000" :show-all-levels="false"></el-cascader>
        </el-form-item>
        <el-form-item label="意向薪资" prop="yxxz00">
          <el-col :span="14">
            <el-input v-model="lgform.yxxz00"></el-input>
          </el-col>
          <el-col :span="10">
            <el-select v-model="lgform.yxxzdw" placeholder="选择单位">
              <el-option label="元/天" value="1"></el-option>
              <el-option label="元/小时" value="2"></el-option>
              <el-option label="元/次" value="3"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="所在地区" prop="qzdq00">
          <el-cascader ref="lgQzdqCas":options="dqOptions" :props="dqProps" v-model="lgform.qzdq00" :show-all-levels="true"></el-cascader>
        </el-form-item>
        <el-form-item label="个人名片">
          <el-radio-group v-model="lgform.mpxh00">
            <el-radio-button v-for="(item,index) in resumeData" :label="item.mpxh00" :key="index" >{{item.mc0000}}</el-radio-button>
          </el-radio-group>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="publishLgJob" >发 布</el-button>
        <el-button size="small" @click="lgDialogVisible=false">关 闭</el-button>
      </div>
    </el-dialog>

    <el-dialog  title="找全职" :visible.sync="qzDialogVisible" width="500px"  append-to-body>
      <el-form ref="qzform" :rules="lgRules" :model="qzform" label-width="80px">
        <el-form-item label="意向岗位" prop="gz0000">
          <el-cascader :options="gzOptions" ref="qzCas" :props="lgProps" v-model="qzform.gz0000" :show-all-levels="false"></el-cascader>
        </el-form-item>
        <el-form-item label="意向薪资" prop="yxxz00">
          <el-col :span="13">
            <el-input v-model="qzform.yxxz00"></el-input>
          </el-col>
          <el-col :span="11">
            元/月
          </el-col>
        </el-form-item>
        <el-form-item label="所在地区" prop="qzdq00">
          <el-cascader ref="qzQzdqCas" :options="dqOptions" :props="dqProps" v-model="qzform.qzdq00" :show-all-levels="true"></el-cascader>
        </el-form-item>
        <el-form-item label="个人名片">
          <el-radio-group v-model="qzform.mpxh00">
            <el-radio-button v-for="(item,index) in resumeData" :label="item.mpxh00" :key="index" >{{item.mc0000}}</el-radio-button>
          </el-radio-group>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="publishQzJob" >发 布</el-button>
        <el-button size="small" @click="qzDialogVisible=false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {commonApi} from "@/api";
import {
  Dialog
} from "vant"

import ReturnBtn from "@/views/components/ReturnBtn.vue";
import {setUser} from "@/utils/auth";
import {queryResume} from "@/api/modules/commonApi";

export default {
  name:"employ",
  components:{
    ReturnBtn
  },
  data(){
    return {
      lgProps:{
        value:"gzbm00",
        label:"gzmc00",
        children:"treeVoList"
      },
      dqProps:{
        lazy:true,
        lazyLoad:(node, resolve)=>{
          if(node.root) {
            commonApi.queryArea("350100").then((res) => {
                res.data.forEach((item) => {
                  item.leaf = true
                })

              resolve(res.data);
            })
          }// else{
          //   if(node.level<1){
          //     commonApi.queryArea(node.value).then((res)=>{
          //       if(node.level==1){
          //         res.data.forEach((item)=>{
          //           item.leaf=true
          //         })
          //       }
          //       resolve(res.data);
          //     })
          //   }
          //
          // }
        }
      },
      lgRules:{
        gwmc00: [
          { required: true, message: '请输入意向岗位名称', trigger: 'blur' },
        ],
        gz0000: [
          { required: true, message: '请输入意向岗位名称', trigger: 'change' },
        ],
        yxxz00: [
          { required: true, message: '请输入意向薪资', trigger: 'blur' },
        ],
        qzdq00: [
          { required: true, message: '请选择意向工作地区', trigger: 'change' },
        ],
      },
      resumeData:[],
      gzOptions:[],
      lgform:{
        mpxh00:"",
        gwmc00:"",
        qzdq00:"",
        yxxzdw:"1",
        yxxz00:"",
        gz0000:""
      },
      qzform:{
        mpxh00:"",
        gwmc00:"",
        qzdq00:"",
        yxxz00:"",
        gz0000:""
      },
      dqOptions:[],
      showQr:false,
      lgDialogVisible:false,
      qzDialogVisible:false
    }
  },
  created() {
    this.queryJobKind()
    this.queryResume()
  },
  methods:{
    navToLg(){
     if(!this.$checkRealName(this.$router)){
       return
     }
     this.lgDialogVisible=true
    },
    navToQz(){
      if(!this.$checkRealName(this.$router)){
        return
      }
      this.qzDialogVisible=true;
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    publishLgJob(){
      this.$refs.lgform.validate((valid) => {
        if (valid) {
          debugger
          this.lgform.gwmc00=this.$refs.lgCas.inputValue
          this.lgform.qzdq00=this.$refs.lgQzdqCas.value[0]
          let param={... this.lgform}
          param.qzdq00=param.qzdq00[2]
          param.gz0000=param.gz0000[1]
           commonApi.publishJob(param).then(()=>{
             this.lgDialogVisible=false
             Dialog.alert({
               title: "温馨提示",
               message: "发布成功",
               theme: 'round-button'
             })
           })
        } else {
          return false;
        }
      });
    },
    publishQzJob(){
      this.$refs.qzform.validate((valid) => {
        if (valid) {
          this.qzform.gwmc00=this.$refs.qzCas.inputValue
          this.qzform.qzdq00=this.$refs.qzQzdqCas.value[0]

          let param={... this.qzform}
          param.qzdq00=param.qzdq00[2]
          param.gz0000=param.gz0000[1]
          commonApi.publishQzJob(param).then(()=>{
            this.qzDialogVisible=false
            Dialog.alert({
              title: "温馨提示",
              message: "发布成功",
              theme: 'round-button'
            })
          })
        } else {
          return false;
        }
      });
    },
    handleTreeList(list) { // 删除第三级children
      for (let i = 0; i < list.length; i++) {
        if (list[i].treeVoList.length < 1) {				// 判断children的数组长度
          list[i].treeVoList = undefined
        } else {
          this.handleTreeList(list[i].treeVoList)
        }
      }
      return list
    },
    queryJobKind(){
      commonApi.queryJobKind().then((res)=>{
         this.gzOptions=this.handleTreeList(res.data)
      })
    },
    queryResume(){
      commonApi.queryResume().then((res)=>{
        this.resumeData=res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
 .panel{
    position: relative;
    width: 100%;
    height: 100%;
   .bg{
     width: 400px;
     z-index: -1;
     left: 10px;
     top: 150px;
     position: absolute;
   }
   .menu{
     box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.5);
     cursor: pointer;
     margin-left: auto;
     margin-right: auto;
     margin-top: 200px;
     display: inline-block;
     border-radius: 16px;
     height:300px;
     width: 300px;
     background-color: rgba(252,192,0,1);
     .title{
       height: 100px;
       line-height: 100px;
       font-size: 40px;
       color: white;
     }
     .icon{
       display: block;
       width: 100px;
       height: 100px;
       margin: 60px auto 0 auto;
     }
   }
 }
</style>
